<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chart</title>
</head>
<body>
    <div id="app">
{#        <ve-line :data="chartData"></ve-line>#}
        <div>
            <ve-histogram :data="chartData1"></ve-histogram>
        </div>
        <div>
            <ve-histogram :data="chartData2"></ve-histogram>
        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">

    <script>
        let data1 = Object.values({[ records1 | tojson]})
        let data2 = Object.values({[ records2 | tojson]})
        new Vue({
            el: '#app',
            data() {
                this.chartSettings = {
                  xAxisType: 'value'
                }
                return {
                    chartData1: {
                        columns: ['年份', '出生人口数'],
                        rows: data1
                    },
                    chartData2: {
                        columns: ['生肖', '出生人口数'],
                        rows: data2
                    }
                }
            }
        })
    </script>
</body>
</html>